<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        display 属性用于设置一个元素应如何显示
        display: none; 隐藏属性
        display: block; 除了转换为块级元素之外, 同时还有显示元素的意思
        display隐藏元素后, 不再占有原来的位置
        后面应用及其广泛, 搭配js可以做很多的网页特效.
     -->

     <!-- 
        visibility 可见性
        visibility属性用于指定一个元素应可见还是隐藏
        visibility: visible; 元素可见
        visibility: hidden; 元素隐藏
        visibility隐藏元素后, 继续占有原来的位置
        如果隐藏元素想要原来位置, 就用visibility: hidden
        如果隐藏元素不想要原来的位置, 就用display: none(用处更多)
      -->

      <!-- 
          overflow溢出, 属性指定了如果内容溢出一个元素的框(超过其指定高度和宽度)时, 会发生什么.
          overflow: visible; 可见
          overflow: hidden; 溢出的隐藏
          overflow: scroll; 溢出的部分显示滚动条
          overflow: auto; 在文字溢出时显示滚动条, 不溢出时不显示滚动条  
       -->
       <!-- 
           一般情况下, 我们都不想让溢出的内容显示出来, 因为溢出的部分会影响布局
           但是如果有定位的盒子, 请慎用overflow: hidden 因为它会隐藏多余的部分.
        
        1.display显示隐藏元素但是不保留位置
        2.visibility显示隐藏元素, 但是保留原来的位置
        3.overflow溢出隐藏, 但是只是对于溢出的部分处理
        -->

</body>
</html>